<template>
    <div class="">
        <el-card class="box-card">
            <el-button type="primary" class="mb10" size="large" @click="addBrand">添加品牌</el-button>
            <el-table :data="tableData" style="width: 100%" border stripe>
                <el-table-column type="index" label="序号" align="center"> </el-table-column>
                <el-table-column prop="resourceImg" label="品牌图标" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.resourceImg" class="wh100" />
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="品牌名称" align="center"> </el-table-column>
                <el-table-column prop="levelOrder" label="排序" align="center"> </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editPro(scope.row)">修改</el-button>
                        <el-button type="primary" size="mini" @click="deletePro(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
                :current-page="query.pagenum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="query.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageTotal"
            ></el-pagination>
        </el-card>
        <el-dialog title="修改商品品牌" :visible.sync="editVisible" width="50%" :before-close="cancleEdit">
            <el-row>
                <el-col :span="6" class="name">品牌名称:</el-col>
                <el-col :span="18">
                    <el-input v-model="form1.name"></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" class="name">排序:</el-col>
                <el-col :span="18">
                    <el-input v-model="form1.levelOrder"></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" class="name">品牌图标:</el-col>
                <el-col :span="10">
                    <img class="wh100 vac" :src="form1.resourceImg" alt="" />
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" @click="$refs.upload.click()" size="large">上传</el-button>
                    <input type="file" ref="upload" id="upload" style="display: none" @change="uploadImg" />
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-select v-model="form1.selectCatoryListIds" multiple placeholder="请选择品牌分类">
                        <el-option v-for="(item) in catoryList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancleEdit">取 消</el-button>
                <el-button type="primary" @click="confirmEdit">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="添加商品品牌" :visible.sync="addVisible" width="50%" @close="addDiaClosed">
            <!-- <el-button type="primary" size="large" class="savedata" @click="saveData">保存</el-button> -->
            <el-row>
                <el-col :span="6" class="name">品牌名称:</el-col>
                <el-col :span="18">
                    <el-input v-model="form.name"></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" class="name">排序:</el-col>
                <el-col :span="18">
                    <el-input v-model.number="form.levelOrder"></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" class="name">品牌图标:</el-col>
                <el-col :span="10">
                    <img class="wh100" :src="form.resourceImg" alt="" />
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" class="fix" @click="$refs.upload.click()" size="large">上传</el-button>
                    <input type="file" ref="upload" id="upload" style="display: none" @change="uploadImg" />
                </el-col>
            </el-row>
            <el-row>
                <el-select v-model="brandCatory" multiple placeholder="请选择品牌分类">
                    <el-option v-for="(item) in catoryList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                </el-select>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmAdd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { getAllBrands, editBrand, deleBrand, addBrand, getBrandInfo, getCatoryTree } from '@/api/goods.js'
import { uploadPic } from '@/api/system.js'
export default {
  name: 'brandmanage',
  data () {
    return {
      goodsId: null,
      query: {
        pagenum: 1,
        pagesize: 50
      },
      pageTotal: 0,
      tableData: [],
      editVisible: false,
      brandName: '',
      order: 1,
      imgSrc: '',
      addVisible: false,
      form: {},
      catoryList: [],
      brandCatory: [],
      form1: {
        name: '',
        levelOrder: 0,
        resourceImg: '',
        id: '',
        list: [],
        selectCatoryListIds: []
      }
    }
  },
  created () {
    this.getAllBrands()
    this.getCatoryTree()
  },
  mounted () {

  },
  methods: {
    // 获取所有品牌
    async getAllBrands () {
      const { Data } = await getAllBrands({
        pageSize: 20,
        pageIndex: 1,
        name: null
      })
      this.tableData = Data.list
      this.pageTotal = Data.paging.totalItemCount
      console.log(Data)
    },

    // 加载所有分类
    async getCatoryTree () {
      const { Data } = await getCatoryTree()
      console.log(Data)
      this.catoryList = Data.dictCategory
    },

    // 监听分页每页条数发生改变
    handleSizeChange (newpagesize) {
      this.query.pagesize = newpagesize
      this.getAllBrands()
    },

    // 监听分页页数发生改变
    handlePageChange (newpagenum) {
      this.query.pagesize = newpagenum
      this.getAllBrands()
    },

    // 修改
    async editPro (brandsDetail) {
      this.goodsId = brandsDetail.id
      this.editVisible = true
      console.log(brandsDetail)
      const { Data } = await getBrandInfo({
        id: brandsDetail.id
      })
      this.form1 = {
        ...Data,
        list: Data.bclist,
        selectCatoryListIds: Data.bclist.map(t => t.id)
      }
      console.log(Data)
    },

    // 确定修改品牌信息
    async confirmEdit () {
      this.form1.list = this.form1.selectCatoryListIds.map((t) => {
        return { categoryid: t }
      })
      console.log(this.form1)
      const data = await editBrand({
        ...this.form1
      })
      console.log(data)
      if (data.RequestStatus !== 200) return this.$message.error('修改失败')
      this.$message.success('修改成功')
      this.editVisible = false
      this.getAllBrands()
    },

    // 取消修改品牌
    cancleEdit () {
      this.editVisible = false
    },

    // 添加品牌
    addBrand () {
      this.addVisible = true
    },

    // 确认添加新的品牌
    async confirmAdd () {
      // console.log(this.brandCatory)
      const list = this.brandCatory.map(t => ({ categoryid: t }))
      // console.log('list', list)
      const form1 = this.form
      this.$set(form1, 'list', list)
      const data = await addBrand({
        ...form1
      })
      if (data.Message !== '') return this.$message.error('添加品牌失败')
      this.$message.success('添加品牌成功')
      this.addVisible = false
      this.form = {}
      this.getAllBrands()
    },

    // 取消添加品牌
    addDiaClosed () {
      this.brandCatory = []
      this.form = {}
    },

    // 删除品牌
    async deletePro (goodsId) {
      const result = await this.$confirm('此操作将删除该品牌, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (result !== 'confirm') {
        return this.$message.info('已取消操作')
      }
      const data = await deleBrand({
        id: goodsId
      })
      console.log(data)
      this.getAllBrands()
    },

    // 保存按钮
    saveData () {
      console.log(11)
      this.editVisible = false
    },

    // 获取被选择的图片
    async uploadImg (e) {
      const file = e.target.files[0]
      if (!file.size) return
      const formData = new FormData()
      formData.append('file', file)
      formData.append('fileCategory', 10)
      const { Data } = await uploadPic(formData)
      console.log(Data)
      this.$set(this.form, 'resourceImg', 'http://118.31.13.253:810/Upload/' + Data.url)
      console.log(this.form.imgSrc)
    }
  }
}
</script>

<style scoped>
.el-input {
    width: 200px;
}

.name {
    width: 10%;
    margin-top: 5px;
}

.el-row {
    margin-bottom: 20px;
}

.savedata {
    margin-left: 600px;
}

.mb10 {
    margin-bottom: 10px;
}

.wh100 {
    width: 100px;
    height: 100px;
}
</style>
